<template>
  <div>
    <!-- mint-ui的swipe左滑出现删除或其他按钮 -->
         <mt-cell-swipe  :title="item.sendprice" v-for="(item,index) in listsNew"  :key="index" :right="rightButtons(item,index)">{{item.name}}
        </mt-cell-swipe>
  </div>
</template>

<script>
import { mapActions, mapState,mapGetters } from "vuex";
export default {
  data(){
    return {
      cancelColId:'',
      status:'取消收藏',
      listsNew:[]
    }
  },
  computed:{
    ...mapState({
      listsCol: state => state.listsCol
    })
  },
  created(){
    // this.rightButtons=[
    //   {content: '取消收藏',style: { background: 'red', color: '#fff' },
    //          handler: () => this.$messagebox('delete')
    //          .then( res =>{
    //            
    //          })}
    //]
  },
  mounted(){
    this.selectList()
  },
  methods:{
    ...mapActions([
      'getCollectList','updateList'
    ]),
    rightButtons(item,index){
     return [ {content: '取消收藏',style: { background: 'red', color: '#fff' },
             handler: () => this.$messagebox('delete')
             .then( res =>{
               this.handleClick(item,index)
             })}
      ]
    },
    handleClick: function (item,index) {
        this.cancelColId = item.id,
        this.updateList({id:item.id,status:'未收藏'}).then(res =>{
            // this.getCollectList()
            this.listsNew.splice(index,1)
          // console.log(this.listsCol)
          // console.log(this.listsNew)
        })
    },
    selectList(){
        this.getCollectList().then( res =>{
        this.listsNew = this.listsCol.filter(val =>{
          return val.status=="已收藏"
        })
      }
      )
    }
  }
};
</script>

<style scoped>
/* .mint-cell-title{
width: 0
} */
/* .mint-cell-value{
  text-align: left
} */
</style>